<template>
  <ul class="list">
    <li v-for="item in movieList" :key="item.id">
      <!-- 使用动态路由 v-on绑定 ""不可省略-->
      <router-link :to="`/detail?id=${item.id}`">
        <img :src="item.img">
        <div class="info">
          <h3>{{ item.title }}</h3>
          <p>豆瓣评分：9</p>
          <p><span class="tag">{{ item.tags }}</span></p>
        </div>
      </router-link>
    </li>
  </ul>
</template>

<script>
import { mapState } from 'vuex'
export default {
  created () {
    this.$store.dispatch('movie/getMovieList')
  },
  computed: {
    ...mapState('movie', ['movieList'])

  }
}
</script>
